<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B4513',
                        secondary: '#D2B48C',
                        board: '#E6C38E',
                        black: '#000000',
                        white: '#FFFFFF',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .board-grid {
                background-image: linear-gradient(#000 1px, transparent 1px),
                                  linear-gradient(90deg, #000 1px, transparent 1px);
            }
            .winning-line {
                animation: pulse 1.5s infinite;
            }
            @keyframes pulse {
                0%, 100% {
                    opacity: 1;
                    transform: scale(1);
                }
                50% {
                    opacity: 0.7;
                    transform: scale(1.05);
                }
            }
            .stone {
                transition: all 0.2s ease;
            }
            .stone:hover:not(.stone-placed) {
                transform: scale(1.1);
                opacity: 0.8;
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-amber-50 to-amber-100 min-h-screen flex flex-col items-center justify-center p-4">
    <div class="w-full max-w-3xl bg-white rounded-xl shadow-2xl overflow-hidden">
        <header class="bg-primary text-white p-4 text-center">
            <h1 class="text-3xl font-bold tracking-tight">五子棋游戏</h1>
        </header>
        
        <main class="p-6">
            <div class="flex flex-col md:flex-row gap-6">
                <!-- 游戏信息区域 -->
                <div class="w-full md:w-1/4 flex flex-col gap-4">
                    <div class="bg-secondary/20 rounded-lg p-4 shadow-md">
                        <h2 class="text-xl font-semibold mb-3 text-primary">游戏状态</h2>
                        <div class="flex items-center gap-2 mb-3">
                            <div id="current-player-indicator" class="w-6 h-6 rounded-full bg-black"></div>
                            <span id="game-status" class="font-medium">黑方回合</span>
                        </div>
                        
                        <div class="mt-4">
                            <button id="restart-btn" class="w-full bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2 btn-hover">
                                <i class="fa fa-refresh"></i>
                                <span>重新开始</span>
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-secondary/20 rounded-lg p-4 shadow-md">
                        <h2 class="text-xl font-semibold mb-3 text-primary">游戏规则</h2>
                        <ul class="list-disc pl-5 text-sm space-y-1">
                            <li>黑白双方轮流在棋盘落子</li>
                            <li>先形成五子连线者获胜</li>
                            <li>连线可以是横向、纵向或斜向</li>
                            <li>点击棋盘交叉点放置棋子</li>
                        </ul>
                    </div>
                </div>
                
                <!-- 棋盘区域 -->
                <div class="w-full md:w-3/4 relative">
                    <div class="aspect-square max-w-lg mx-auto relative">
                        <div id="board" class="absolute inset-0 board-grid bg-board rounded-lg shadow-inner" style="background-size: calc(100% / 14) calc(100% / 14);">
                            <!-- 棋子将通过JS动态生成 -->
                        </div>
                        
                        <!-- 胜利提示覆盖层 -->
                        <div id="win-overlay" class="absolute inset-0 bg-black/50 rounded-lg flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-500">
                            <div class="bg-white p-6 rounded-xl shadow-2xl text-center transform transition-transform duration-500 scale-90" id="win-message">
                                <h2 class="text-2xl font-bold mb-2" id="winner-text">黑方获胜！</h2>
                                <div class="flex justify-center my-4">
                                    <div class="w-12 h-12 rounded-full bg-black animate-pulse"></div>
                                </div>
                                <button id="new-game-btn" class="bg-primary hover:bg-primary/90 text-white py-2 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 btn-hover">
                                    开始新游戏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <footer class="bg-primary/10 text-primary/80 text-center p-3 text-sm">
            <p>© 2025 五子棋游戏 | 享受游戏乐趣</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 游戏常量
            const BOARD_SIZE = 15;
            const EMPTY = 0;
            const BLACK = 1;
            const WHITE = 2;
            
            // 游戏状态
            let currentPlayer = BLACK;
            let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(EMPTY));
            let gameActive = true;
            let winningCells = [];
            
            // DOM 元素
            const boardElement = document.getElementById('board');
            const currentPlayerIndicator = document.getElementById('current-player-indicator');
            const gameStatusElement = document.getElementById('game-status');
            const restartBtn = document.getElementById('restart-btn');
            const winOverlay = document.getElementById('win-overlay');
            const winnerText = document.getElementById('winner-text');
            const newGameBtn = document.getElementById('new-game-btn');
            
            // 初始化棋盘
            function initializeBoard() {
                boardElement.innerHTML = '';
                
                // 创建交叉点
                for (let row = 0; row < BOARD_SIZE; row++) {
                    for (let col = 0; col < BOARD_SIZE; col++) {
                        const cell = document.createElement('div');
                        cell.classList.add('absolute', 'stone');
                        
                        // 计算位置百分比
                        const xPercent = (col / (BOARD_SIZE - 1)) * 100;
                        const yPercent = (row / (BOARD_SIZE - 1)) * 100;
                        
                        cell.style.left = `${xPercent}%`;
                        cell.style.top = `${yPercent}%`;
                        cell.style.width = `${100 / BOARD_SIZE}%`;
                        cell.style.height = `${100 / BOARD_SIZE}%`;
                        
                        // 居中
                        cell.style.transform = 'translate(-50%, -50%)';
                        
                        // 添加点击事件
                        cell.addEventListener('click', () => placeStone(row, col));
                        
                        // 添加数据属性
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        
                        boardElement.appendChild(cell);
                    }
                }
            }
            
            // 放置棋子
            function placeStone(row, col) {
                // 检查是否可以落子
                if (gameBoard[row][col] !== EMPTY || !gameActive) {
                    return;
                }
                
                // 更新游戏状态
                gameBoard[row][col] = currentPlayer;
                
                // 渲染棋子
                renderBoard();
                
                // 检查是否获胜
                if (checkWin(row, col)) {
                    gameActive = false;
                    highlightWinningCells();
                    showWinMessage(currentPlayer);
                    return;
                }
                
                // 检查是否平局
                if (checkDraw()) {
                    gameActive = false;
                    showDrawMessage();
                    return;
                }
                
                // 切换玩家
                currentPlayer = currentPlayer === BLACK ? WHITE : BLACK;
                updateGameStatus();
            }
            
            // 渲染棋盘
            function renderBoard() {
                const cells = boardElement.querySelectorAll('.stone');
                
                cells.forEach(cell => {
                    const row = parseInt(cell.dataset.row);
                    const col = parseInt(cell.dataset.col);
                    
                    // 移除之前的颜色类
                    cell.classList.remove('bg-black', 'bg-white', 'stone-placed');
                    
                    // 添加当前颜色
                    if (gameBoard[row][col] === BLACK) {
                        cell.classList.add('bg-black', 'stone-placed');
                    } else if (gameBoard[row][col] === WHITE) {
                        cell.classList.add('bg-white', 'stone-placed', 'border', 'border-gray-300');
                    }
                    
                    // 设置圆形
                    cell.classList.add('rounded-full', 'shadow-md');
                    
                    // 如果是获胜的棋子，添加高亮效果
                    if (winningCells.some(winCell => winCell.row === row && winCell.col === col)) {
                        cell.classList.add('winning-line');
                    }
                });
            }
            
            // 检查获胜
            function checkWin(row, col) {
                const directions = [
                    [0, 1],   // 水平
                    [1, 0],   // 垂直
                    [1, 1],   // 对角线
                    [1, -1]   // 反对角线
                ];
                
                const player = gameBoard[row][col];
                
                for (const [dx, dy] of directions) {
                    let count = 1;  // 当前位置已经有一个棋子
                    winningCells = [{row, col}];
                    
                    // 正方向检查
                    for (let i = 1; i < 5; i++) {
                        const newRow = row + i * dx;
                        const newCol = col + i * dy;
                        
                        if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {
                            break;
                        }
                        
                        if (gameBoard[newRow][newCol] === player) {
                            count++;
                            winningCells.push({row: newRow, col: newCol});
                        } else {
                            break;
                        }
                    }
                    
                    // 反方向检查
                    for (let i = 1; i < 5; i++) {
                        const newRow = row - i * dx;
                        const newCol = col - i * dy;
                        
                        if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {
                            break;
                        }
                        
                        if (gameBoard[newRow][newCol] === player) {
                            count++;
                            winningCells.push({row: newRow, col: newCol});
                        } else {
                            break;
                        }
                    }
                    
                    // 五子连珠
                    if (count >= 5) {
                        return true;
                    } else {
                        winningCells = [];
                    }
                }
                
                return false;
            }
            
            // 高亮显示获胜棋子
            function highlightWinningCells() {
                renderBoard(); // 重新渲染棋盘以应用高亮效果
            }
            
            // 检查平局
            function checkDraw() {
                for (let row = 0; row < BOARD_SIZE; row++) {
                    for (let col = 0; col < BOARD_SIZE; col++) {
                        if (gameBoard[row][col] === EMPTY) {
                            return false; // 还有空位，不是平局
                        }
                    }
                }
                return true; // 棋盘已满，平局
            }
            
            // 显示胜利消息
            function showWinMessage(player) {
                const playerName = player === BLACK ? '黑方' : '白方';
                winnerText.textContent = `${playerName}获胜！`;
                
                // 设置获胜方的颜色
                const winnerIcon = winOverlay.querySelector('div > div');
                winnerIcon.className = 'w-12 h-12 rounded-full animate-pulse';
                winnerIcon.classList.add(player === BLACK ? 'bg-black' : 'bg-white', 'border', 'border-gray-300');
                
                // 显示覆盖层
                winOverlay.classList.remove('opacity-0', 'pointer-events-none');
                winOverlay.querySelector('#win-message').classList.remove('scale-90');
                winOverlay.querySelector('#win-message').classList.add('scale-100');
            }
            
            // 显示平局消息
            function showDrawMessage() {
                winnerText.textContent = '平局！';
                
                // 设置平局图标
                const winnerIcon = winOverlay.querySelector('div > div');
                winnerIcon.className = 'w-12 h-12 flex items-center justify-center animate-pulse';
                winnerIcon.innerHTML = '<i class="fa fa-handshake-o text-2xl text-gray-500"></i>';
                
                // 显示覆盖层
                winOverlay.classList.remove('opacity-0', 'pointer-events-none');
                winOverlay.querySelector('#win-message').classList.remove('scale-90');
                winOverlay.querySelector('#win-message').classList.add('scale-100');
            }
            
            // 更新游戏状态显示
            function updateGameStatus() {
                const playerName = currentPlayer === BLACK ? '黑方' : '白方';
                gameStatusElement.textContent = `${playerName}回合`;
                currentPlayerIndicator.className = 'w-6 h-6 rounded-full';
                currentPlayerIndicator.classList.add(currentPlayer === BLACK ? 'bg-black' : 'bg-white', 'border', 'border-gray-300');
            }
            
            // 重置游戏
            function resetGame() {
                currentPlayer = BLACK;
                gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(EMPTY));
                gameActive = true;
                winningCells = [];
                
                // 隐藏胜利覆盖层
                winOverlay.classList.add('opacity-0', 'pointer-events-none');
                winOverlay.querySelector('#win-message').classList.remove('scale-100');
                winOverlay.querySelector('#win-message').classList.add('scale-90');
                
                // 更新状态
                updateGameStatus();
                
                // 重新渲染棋盘
                renderBoard();
            }
            
            // 事件监听
            restartBtn.addEventListener('click', resetGame);
            newGameBtn.addEventListener('click', resetGame);
            
            // 初始化游戏
            initializeBoard();
            updateGameStatus();
        });
    </script>
</body>
</html>
    